<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>v-bind语法(掌握)</title> 
</head>
<body>
  <div id="app">
    <button @click="changeImg">切换图片</button><br>
    <!--1. 绑定img的src属性-->
      <img v-bind:src="show_url" alt=""><br>
      <!--2. 绑定a的href属性-->
      <!--语法糖, 使用: 代替v-bind-->
      <a :href="a_href">百度一下</a>
  </div>
  
  <script src="../lib/vue.js"></script>
  <script>
    // 使用vue
    const app = Vue.createApp({
      data: function(){
        return {
          name: "Hello v-memo"
          , imgUrl_1: "https://img0.baidu.com/it/u=2191392668,814349101&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=1399"
          , imgUrl_2: "https://img0.baidu.com/it/u=1277253023,1926890940&fm=253&fmt=auto&app=138&f=JPEG?w=744&h=500"
          , show_url: "https://img0.baidu.com/it/u=2191392668,814349101&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=1399"
          , a_href: "https://www.baidu.com/index.htm"
        }
      }
      ,methods: {
        changeImg: function() {
          this.show_url = this.show_url === this.imgUrl_1 ? this.imgUrl_2 : this.imgUrl_1 // 切换图片
        }
      }
    }
    )
    // 挂载 
    app.mount("#app")
    
  </script>

</body>
</html>
